<template>

    <z-paging :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无订单`"
        :show-empty-view-reload-when-error="false" ref="paging" v-model="list" @query="queryList" :fixed="true"
        width="100%" height="100%">
            <view class="py-[30rpx] px-[32rpx]">
                <view class="w-[100%] h-[428rpx] relative overflow-hidden px-[32rpx] py-[36rpx]">
                    <image class="w-[686rpx] h-[428rpx] absolute top-[0] left-0 z-[-1]" src="/static/images/cy/bg.png"
                        mode="aspectFit"></image>
                    <view class="flex justify-between items-center">
                        <view class="flex-1 overflow-hidden flex items-center">
                            <up-avatar src="src" size="92rpx"></up-avatar>
                            <text class="text-[#fff] text-[32rpx] ml-[24rpx]  truncate max-w-[320rpx]">小喇叭二手车</text>
                        </view>
                        <view
                            class="w-[180rpx] mb-[28rpx] top_bg h-[60rpx] flex rounded-[20rpx]  justify-center items-center">
                            <up-icon name="phone-fill" color="#000" size="32rpx"></up-icon>
                            <text class="text-[28rpx] ml-[4rpx] mb-[8rpx] font-bold">电话联系</text>
                        </view>
                    </view>
                    <view class="flex justify-end items-center">
                        <view class="w-[510rpx] relative h-[118rpx] py-[18rpx] pl-[38rpx] pr-[22rpx] ">
                            <image class="w-[510rpx] h-[118rpx] absolute top-[0] left-0 z-[-1]"
                                src="/static/images/cy/msg.png" mode="aspectFit"></image>
                            <text class="text-[#fff] text-[24rpx]">
                                HI~我是您的专属销售顾问，推荐给你59辆好车，欢迎咨询
                            </text>
                        </view>
                    </view>
                    <view class="mt-[28rpx] mb-[20rpx] w-[100%] h-[2rpx] bg-[rgba(255,255,255,0.34)]">

                    </view>
                    <view class="flex mb-[12rpx] items-center justify-between w-[100%] overflow-hidden">
                        <text class="text-[#fff] text-[32rpx]  truncate max-w-[530rpx]">小喇叭二手车</text>
                        <view class="flex items-baseline">
                            <text class="text-[#999] text-[24rpx] font-[400] mr-[8rpx]">进店</text>
                            <up-icon name="arrow-right" color="#999" size="24rpx"></up-icon>
                        </view>
                    </view>
                    <view class="flex items-center text-[#999999]  text-[24rpx]">
                        <up-icon name="map" color="#fff" size="21rpx"></up-icon>
                        <text class="ml-[8rpx]">湖北省武汉市洪山区</text>
                    </view>
                </view>
                <view class="w-[100%] mt-[22rpx]">
                    <view v-for="(item,index) in list" :key="item" class="w-[100%] bg-[#fff] rounded-[20rpx] mb-[24rpx] p-[20rpx]">
                        <view class="flex items-center">
                            <image class="w-[258rpx] h-[212rpx] rounded-[12rpx]" src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/cde0d646b40e4c7ca3e67ca5cd2e1a0c_mergeImage.png"></image>
                            <view class="ml-[16rpx]  flex-1">
                                <view class="w-[100%] text-[32rpx] mb-[8rpx] text-[#000] leading-[48rpx]">
                                    大众—2022款 帕萨特2.0TSI330TSI星空精英版
                                </view>
                                <view class="text-[24rpx] mb-[28rpx] flex  items-center text-[#666] font-[400] leading-[36rpx]">
                                    2015年4月
                                    <text class="w-[2rpx] mx-[16rpx] h-[20rpx] bg-[#979797]"></text>
                                    6.3万公里
                                    <text class="w-[2rpx] mx-[16rpx] h-[20rpx] bg-[#979797]"></text>
                                    欧六
                                </view>
                                <view class="flex items-center">
                                    <text class="text-[#FF0000] text-[36rpx] mr-[26rpx]">
                                        8.89
                                        <text class="text-[28rpx] text-[#000]">万</text>
                                    </text>
                                    <text class="text-[28rpx] text-[#999]">指导价8.89万</text>
                                </view>
                            </view>
                        </view>
                        <view class="mt-[20rpx] flex justify-end">
                            <image src="/static/images/cy/btn.png" class="w-[180rpx] h-[60rpx]"></image>
                        </view>
                    </view>
                </view>
            </view>
    </z-paging>


</template>
<script setup>
import { ref } from 'vue'
// 分页数据
const list = ref([]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
    try {
        const from = {
            pageNum: pageNum,
            pageSize: pageSize,
        };
        // const { rows } = await listWorker(from);
        paging.value.complete([1, 2, 3, 4, 5, 6, 7]);
    } catch (e) {
        console.log('报错=>', e);
        //TODO handle the exception
        paging.value.complete(false);
    }
};
</script>
<style scoped lang="scss">
.top_bg {
    background: linear-gradient(rgb(255, 239, 184) 0%, rgb(255, 226, 129) 100%);
}
</style>